<!--
File Created: 2018-02-07 11:03
Author: xxq (you@you.you)
__________________________________________________
Last Modified: 2018-02-11 17:58:08
Modified By: xxq (you@you.you>)
__________________________________________________
Copyright - 2018 xnb, xnb
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动手势</title>
    <style>
        *{ margin: 0;padding: 0}
        html, body{
            height: 100%;
            background: #eee;
        }
    </style>
</head>
<body>
    <div id="touchMove" style="width: 100px;height: 100px;background: red;transform: translateX(100px)">拖动我试试</div>
    <p id="direction">滑动显示滑动方向</p>
</body>
</html>
<script src="https://unpkg.com/alloylever@latest"></script>
<script>
    AlloyLever.config({
        cdn:'//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js',  //vconsole的CDN地址
    })
</script>
<script src="https://unpkg.com/alloyfinger@latest"></script>
<script>
    let point = {}
    new AlloyFinger('body', {
        touchStart: function (e) {
            Object.assign(point, {'touchStart': e.changedTouches[0]})
        },
        touchMove: function (e) { 
        },
        touchEnd:  function (e) { 
            console.log(e.direction)
            Object.assign(point, {'touchEnd': e.changedTouches[0]})
            if( Math.abs(point.touchEnd.clientX - point.touchStart.clientX) >= 100) {
                console.log(Math.abs(point.touchEnd.clientX - point.touchStart.clientX))
                const direction = e.direction === 'Right'? '后退' : '前进' 
                document.querySelector('#direction').innerHTML = direction
            }
        },
        touchCancel: function () { },
        multipointStart: function () { },
        multipointEnd: function () { },
        tap: function (e) {
        },
        doubleTap: function (e) {
            console.log('doubleTap', e)
            document.querySelector('#doubleTap').style.display = 'block'
        },
    })

    const touchMove = document.querySelector('#touchMove')
// 这段代码是有 bug 的（得到的不一定是 translateX），后续考虑使用 transfrom.js 来优化设置 transform
    let x = touchMove.style.transform? +touchMove.style.transform.replace(/[^0-9]/ig,"") : 0 // +号隐式转换为数字类型
    console.log(x)
    new AlloyFinger(touchMove, {
        touchMove: function (e) { 
            x += e.deltaX
            touchMove.style.transform = `translateX(${x}px)`
        }
    })
</script>